<template>
    <div class="groupbuyingContent">
        <div class="groupbuyingNavBar">
            <van-nav-bar title="团购" :border="false"></van-nav-bar>
        </div>
        <div class="groupbuyingSwiper">
            <van-swipe @change="onChange" autoplay=3000>
                <van-swipe-item v-for="(swiper,i) in swiper" :key="i">
                    <img :src="swiper.pic">
                </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">
                    {{ current + 1 }}/{{ swiper.length }}
                </div>
            </template>
          </van-swipe>
        </div>
        <div class="groupGoods">
            <groupGoods :groupGoods="groupGoods"></groupGoods>
        </div>
    </div>
  
</template>

<script>
import groupGoods from "../../components/groupGoods"
import { shoppingService } from "@/api";
export default {
    name:"groupbuying",
    data(){
        return{
            current: 0,
            swiper:[],
            groupGoods:[],
        }
    },
    created(){
        this.asgetSlideAdvers();
        this.asgetShopList();
    },
    methods:{
        // 轮播图
        onChange(index) {
            this.current = index;
        },
    // 获取广告列表
    async asgetSlideAdvers() {
      const { data } = await shoppingService.getSlideAdvers(1);
      console.log(data, "轮播图");
      this.swiper = data; 
    },
    // 商品团购表
    async asgetShopList(){
      const { data } = await shoppingService.getShopList(1,10,2,0,1);
      console.log(data,"团购列表")
      this.groupGoods = data.list;
     },
    },
    components:{
        groupGoods,
    }
}
</script>

<style scoped>
    .groupbuyingContent{
        background-color: rgba(247,249,252,1);
    }
    .groupbuyingSwiper{
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }
    .groupbuyingSwiper img{
        width: 95%;
        height: 155px;
    }
    .custom-indicator {
        position: absolute;
        right: 15px;
        bottom: 15px;
        padding: 2px 5px;
        font-size: 15px;
        background-color: #69413e;
        color: #fff;
        border-radius: 20px;
    }
</style>